<template>
  <div>
    <alert v-model="show" title="提示" button-text="我知道了" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <loading v-model="showLoading" text="加载中..."></loading>
    <x-header style="background-color:#3d82e5;width:100%;position:absolute;left:0;top:0;z-index:100;" :left-options="{showBack: true}">
      <p name="content" style="margin-left: -12px">申请退款</p>
    </x-header>
    <flexbox orient="vertical" :gutter="0">
      <flexbox-item>
        <div style="height: 30px;margin-left: 15px;font-size: 14px;line-height: 30px;">{{mcreateTime}}</div>
      </flexbox-item>
      <flexbox-item>
        <group gutter="0" style="margin-bottom: 10px;">
          <flexbox orient="vertical" style="border-bottom: solid 1px gainsboro;margin-top: 10px">
            <flexbox-item style="border-bottom: solid 1px gainsboro;padding-bottom: 10px;">
              <flexbox :gutter="0">
                <flexbox-item :span="4">
                  <div style="display: block;width:80px;height:80px;margin:10px 5px 10px 15px;">
                    <!--<img :src=order.itemUrl alt="itemImg" style="width: 100%;"> 正式图片时可直接图片100%-->
                    <img :src=obligationList.itemUrl alt="商品图片" style="width:80px;height:80px;">
                  </div>
                </flexbox-item>
                <flexbox-item>
                  <p style="line-height: 20px;font-size: 13px;color: #636363;">{{obligationList.itemName}}</p>
                </flexbox-item>
                <flexbox-item :span="2.5">
                  <p style="line-height: 30px;font-size: 13px;text-align: right;padding-right: 10px;" @click="getOrderDetailFn(index,morderDetailVos.id)">¥{{obligationList.price}}</p>
                  <p style="color: #a9a9a9;line-height: 30px;font-size: 12px;text-align: right;padding-right: 10px;" @click="getOrderDetailFn(index,morderDetailVos.id)">x{{obligationList.count}}</p>
                </flexbox-item>
              </flexbox>
            </flexbox-item>
            <flexbox-item>
              <div style="margin-top: -8px">
                <p style="height: 5px;background: #fff;;position: relative;z-index: 1;"><span>&nbsp;</span></p>
                <p style="display: inline-block;margin-left: 15px;float: left;margin-top: -8px;line-height: 45px;font-size: 15px;color: #636363;">退款理由:</p>
                <x-textarea style="display: inline-block;float: left;width: 60%;margin-top: -3px;" :show-counter="false" v-model="refundReson" :rows="3" ref="autosize" placeholder="请输入退款理由"></x-textarea>
              </div>
            </flexbox-item>
          </flexbox>
        </group>
      </flexbox-item>
    </flexbox>
    <x-button type="primary" action-type="submit" style="width: 50%;position: relative;background: #3d82e5;font-size: 15px;top: 65%;margin-top: 20px" @click.native="orderAuditFn">提交审核</x-button>
  </div>
</template>

<script>
  import { Group, Cell, Tab, TabItem, Swiper, XHeader, SwiperItem, Flexbox, FlexboxItem, XButton, Clocker, XInput, XTextarea, Loading, Alert } from 'vux'
  import Autosize from 'autosize'
  import * as types from '../../../../store/types'
  import * as urls from '../../../../api/urls'

  export default {
    components: {
      Group,
      Cell,
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      Flexbox,
      FlexboxItem,
      XButton,
      Clocker,
      XInput,
      XTextarea,
      Loading,
      Alert,
      XHeader
    },
    beforeDestroy () {
      Autosize.destroy(this.$refs.autosize.$refs.textarea)
    },
    data () {
      return {
        show: false,
        showLoading: false,
        message: '',
        mcreateTime: '',
        refundReson: '',
        showType: 'coupon',
        index: 0,
        obligationList: {
          id: 1938002928888,
          orderTime: '2017-02-22 18:21:45',
          itemUrl: '',
          itemName: '',
          price: '50',
          count: 5
        }
      }
    },
    mounted: function () {
      Autosize(this.$refs.autosize.$refs.textarea)
      this.getItemInfo()
      this.weixinfn21()
      this.mcreateTime = this.$store.state.userOrder.mcreateTime
    },
    methods: {
      onHide () {
        if (this.message === '退款申请提交成功，我们将尽快为您审核') {
          let reIndex = this.$store.state.userOrder.index
          this.$store.commit(types.USER_ORDER, {index: reIndex})
          this.$router.go(-1)
        }
      },
      onShow () {
      },
      orderAuditFn () {
        let userId = window.sessionStorage.getItem('userId')
        let itemId = this.$store.state.userOrder.itemId
        let that = this
        that.http(urls.refundApply, {userId: userId, orderSubId: itemId, refundReson: that.refundReson}, function (res) {
          if (res.status === 100) {
            that.show = true
            that.message = '退款申请提交成功，我们将尽快为您审核'
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = '服务器错误，请稍后重试'
        })
      },
      getItemInfo () {
        let userId = window.sessionStorage.getItem('userId')
        // 存在store里面刷新页面的时候会丢失
        let itemId = window.sessionStorage.getItem('xxt-refoundItemId')
        let that = this
        that.http(urls.findBySubId, {userId: userId, id: itemId}, function (res) {
          if (res.status === 100) {
            that.obligationList = res.data.sub
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      weixinfn21 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        let logo = window.sessionStorage.getItem('LOGO')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    }
  }
</script>

<style scoped="scoped">
  .tab-swiper{
    height: auto;
  }
  .couponBox{
    border: solid 1px grey;
    margin: 10px 15px;
    border-radius: 5px;
  }
  .couponBox >p:nth-child(1){
    border-bottom: dashed 1px grey;
  }
  .couponBox >p >span{
    display: inline-block;
    font-size: 20px;
    padding: 0 10px;
  }
  .couponBox >p >span:nth-child(2){
    float: right;
  }
  p{
  }
  .validity{
    text-align: right;
    line-height: 30px;
    padding-right: 10px;
  }
  .flex-demo {
    border-radius: 4px;
    background-clip: padding-box;
    margin-top: 8px;
  }
</style>
